<template>
  <div class="classgoods">
      <!-- <div class="goodshead">
        <p @click="back"> < </p>
        <p>分类商品</p>
        <p></p>
      </div> -->
      <top-nav title="分类商品"></top-nav>
      <div class="goodscontent">
          <div class="goodsimg" v-if=" list.length === 0">
            <img src="/nullgoods.png" />
          </div>
          <div class="goodslist" v-else>
              <div class="goods" v-for="item in list" :key="item.id" @click="toCart(item.id)">
                <div class="list-img">
                  <img :src="item.pic" alt="">
                  <div class="list-name">
                    {{item.name}}
                  </div>
                </div>
                <div>

                </div>
              </div>
          </div>
      </div>
 </div>
</template>

<script>
import topNav from '../components/bottomNav/topNav.vue';
import { getTypeList } from '../utils/api'
export default {
  components: { topNav },
  name: 'classgoods',
  data() { 
    return {
      list:[]
    }
  },
  created() {
    console.log(this.$route.query.id);
    getTypeList(this.$route.query.id).then(res=>{
      this.list = res
    })
  },  
  methods:{
    back(){
      this.$router.back()
    },
    toCart(id){
      this.$router.push({
        name:'detail',
        query:{
          id
        }
      })
    }
  },
 }
</script>

<style lang="scss" scoped>
.classgoods{
  width: 100%;
  height: 100%;
}
.goodshead{
  width: 100%;
  height: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.5rem;
  font-size: 0.30rem;
}
.goodscontent{
  width: 100%;
  height: calc(100% - 1rem);
}
.goodsimg{
  width: 100%;
  height: 5rem;
  margin-top: 2rem;
  img{
    width: 100%;
    height: 100%;
  }
}
.goodslist{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 0.2rem;
  align-items: center;
  .goods{
    width: 48%;
    height: 3.5rem;
    .list-img{
      width: 100%;
      height: 100%;
      position: relative;
      img{
        width: 100%;
        height: 100%;
      }
      .list-name{
        width: 100%;
        height: 0.7rem;
        background-color: coral;
        line-height: 0.7rem;
        font-size: 0.28rem;
        padding: 0 0.1rem;
        position: absolute;
        bottom: 0;
      }
    }
  }
}
</style>